<template>
  <div class="app-container">
    <el-card class="card">
      <template #header>
        <div class="card-header">
          <div>冷柜参数配置</div>
          <div>
            <el-select v-model="value" placeholder="Select" style="width: 240px">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </div>
        </div>
      </template>
      <el-tabs v-model="activeName" type="card" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="调节参数" name="0"></el-tab-pane>
        <el-tab-pane label="除霜参数" name="1"></el-tab-pane>
        <el-tab-pane label="风扇参数" name="2"></el-tab-pane>
        <el-tab-pane label="报警参数" name="3"></el-tab-pane>
        <el-tab-pane label="其他参数" name="3"></el-tab-pane>
      </el-tabs>
      <div class="parameter">
        <div class="parameter-row">
          <div class="parameter-title">温度控制参数</div>
        </div>
        <div class="parameter-item">
          <div class="item1">控制温度回差值</div>
          <div class="item1">01-10℃ / 01-36℉</div>
          <div class="item1">
            <span>5℃</span>
            <el-input placeholder="请输入数据"></el-input>
          </div>
        </div>
        <div class="parameter-item">
          <div class="item1">控制温度回差值</div>
          <div class="item1">01-10℃ / 01-36℉</div>
          <div class="item1">
            <span>5℃</span>
            <el-input placeholder="请输入数据"></el-input>
          </div>
        </div>
        <div class="parameter-item">
          <div class="item1">控制温度回差值</div>
          <div class="item1">01-10℃ / 01-36℉</div>
          <div class="item1">
            <span>5℃</span>
            <el-input placeholder="请输入数据"></el-input>
          </div>
        </div>
        <div class="parameter-item">
          <div class="item1">控制温度回差值</div>
          <div class="item1">01-10℃ / 01-36℉</div>
          <div class="item1">
            <span>5℃</span>
            <el-input placeholder="请输入数据"></el-input>
          </div>
        </div>
      </div>

      <div class="btn-flex">
        <el-button type="primary">保存参数</el-button>
        <el-button>恢复出厂设置</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup name="Index" lang="ts">
import { ref } from 'vue';
import type { TabsPaneContext } from 'element-plus';
const value = ref('');

const options = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
];

const activeName = ref('0');

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
</script>

<style lang="scss" scoped>
.card {
  margin-bottom: 20px;
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.btn-flex {
  display: flex;
  justify-content: flex-end;
}
.parameter {
  position: relative;
  border: 1px solid rgba(215, 215, 215, 1);
  background: rgba(250, 251, 253, 1);
  border-radius: 5px;
  padding: 10px;
  margin-bottom: 20px;
  .parameter-title {
    font-weight: bold;
    padding-bottom: 10px;
  }
}
.parameter-item {
  display: flex;

  .item1 {
    padding: 5px 0;
    border-top: 1px solid rgba(215, 215, 215, 0.5);
    display: flex;
    align-items: center;
    width: 33.333%;
    span {
      margin-right: 20px;
    }
  }
}
</style>
